<template>
  <div>
      <router-link 
        tag="div" 
        to="/" 
        class="header-abs"
        v-show="showabs"
      >
          <div class="iconfont header-abs-icon">&#xe699;</div>
      </router-link>
      <div 
        class="header-fixed" 
        v-show="!showabs"
        :style="opacityStyle"
      >
          <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe699;</div>
          </router-link>
          景点详情
      </div>
  </div>
</template>

<script>
export default {
    name:'DetailHeader',
    data(){
        return{
            showabs:true,
            opacityStyle:{
                opacity:0,
            }
        }
    },
    methods:{
        handleScroll(){
            const top=document.documentElement.scrollTop||document.body.scrollTop;
            if(top>60){
                let opacity=top/140;
                opacity=opacity>1?1:opacity;
                this.opacityStyle={opacity}
                this.showabs=false;
            }else{
                this.showabs=true;
            }
        }
    },
    activated(){
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated(){//解绑事件，不然会全局不断触发
        window.removeEventListener('scroll',this.handleScroll)
     }
}
</script>

<style scoped>
.header-abs{
    position: absolute;
    left: 0.2rem;
    top:0.2rem;
    width:0.8rem;
    height:0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.678);
}
.header-abs-icon{
    color: #fff;
    font-size: 0.4rem;
}
.header-fixed{
    z-index:99;
    position:fixed;
    top:0;
    left:0;
    right:0;
    
    height:0.86rem;
    line-height: 0.86rem;
    text-align: center;
    color:#fff;
    font-size:0.4rem;
    background: #00bcd4;
}
.header-fixed-back{
    position:absolute;
    top:0;
    left:0;
    width:0.64rem;
    text-align: center;
    font-size: 0.4rem;
    color:#fff;
}
</style>